<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <button id="button1">点击按钮 1</button>
  <button id="button2">点击按钮 2</button>
  <button id="button3">点击按钮 3</button>

  <div
    id="ball"
    style="position:absolute;background:#000;width:50px;height:50px"
  ></div>
  输入小球移动后的位置：<input id="pos"/>
  <button id="moveBtn">开始移动</button>
  <button id="cancelBtn">cancel</button>
</body>
</html>
<script src="./Animate.js"></script>
<script>

// 点击移动小球
let ball = document.getElementById('ball')
let pos = document.getElementById('pos')
let moveBtn = document.getElementById('moveBtn')
let cancelBtn = document.getElementById('cancelBtn')

/** 命令模式 */ 
class MoveCommand {
  constructor(receiver, pos) {
    this.receiver = receiver
    this.pos = pos
    this.oldPos = null
  }
  execute() {
    this.receiver.start('left', this.pos, 1000, 'strongEaseOut')
    this.oldPos = this.receiver.dom.getBoundingClientRect()[this.receiver.propertyName]
  }
  undo() {
    this.receiver.start('left', this.oldPos, 1000, 'strongEaseOut')
  }
}
let moveCommand
let animate = new Animate(ball)
moveBtn.onclick = () => {
  moveCommand = new MoveCommand(animate, pos.value)
  moveCommand.execute()
}
cancelBtn.onclick = () => {
  console.log('moveCommand', moveCommand);
  moveCommand.undo()
}

/** 简单实现 */
// moveBtn.onclick = function() {
//   let animate = new Animate(ball)
//   animate.start('left', pos.value, 1000, 'strongEaseOut')
// };


/** 菜单系统 */
let btn1 = document.getElementById('button1')
let btn2 = document.getElementById('button2')
let btn3 = document.getElementById('button3')

let MenuBar = {
  refresh() {
    console.log('刷新菜单目录')
  }
}
let SubMenu = {
  add() {
    console.log('增加子菜单')
  },
  del() {
    console.log('删除子菜单')
  }
}

/** 闭包实现命令模式 */
function setCommand(btn, command) {
  btn.onclick = () => {
    command.execute()
  }
}
function RefreshMenuBarCommand(receiver) {
  return {
    execute() {
      receiver.refresh()
    }
  }
}
let refreshMenuBarCommand = RefreshMenuBarCommand(MenuBar)
setCommand(btn1, refreshMenuBarCommand)

/** 简单实现 */ 
// function bindClick(btn, func) {
//   btn.onclick = func
// }
// bindClick(btn1, MenuBar.refresh)
// bindClick(btn2, SubMenu.add)
// bindClick(btn3, SubMenu.del)

/** command + receiver */ 
// function setCommand(btn, command) {
//   btn.onclick = () => command.execute()
// }

// class RefreshMenuBarCommand {
//   constructor(receiver) {
//     this.receiver = receiver
//   }
//   execute() {
//     this.receiver.refresh()
//   }
// }
// class AddSubMenuCommand {
//   constructor(receiver) {
//     this.receiver = receiver
//   }
//   execute() {
//     this.receiver.add()
//   }
// }
// class DelSubMenuCommand {
//   constructor(receiver) {
//     this.receiver = receiver
//   }
//   execute() {
//     this.receiver.del()
//   }
// }

// let refreshMenuBarCommand = new RefreshMenuBarCommand(MenuBar)
// let addSubMenuCommand = new AddSubMenuCommand(SubMenu)
// let delSubMenuCommand = new DelSubMenuCommand(SubMenu)

// setCommand(btn1, refreshMenuBarCommand)
// setCommand(btn2, addSubMenuCommand)
// setCommand(btn3, delSubMenuCommand)
</script>